<template>
  <div class="test">
    <div class="preview">
      <el-input :placeholder="$t('configLazyLoad.channel.dockingTip15')" v-model.trim="previewtUrl">
          <template slot="prepend">Http://</template>
      </el-input>
      <span class="iconfont icon-yulan"
            @click="preview"></span>
    </div>
    <div class="show"
         v-show="isShow">
      <iframe :src="url" frameborder="0"></iframe></div>
  </div>
</template>
<script>
  export default {
    name: 'ChannelSkillGroup',
    data () {
      return {
        previewtUrl: '',
        url: '',
        isShow: false
      }
    },
    components: {
    },
    methods: {
      preview () {
        this.url = this.previewtUrl
        this.isShow = true
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .test
    height calc(100vh - 250px)
    overflow auto
    padding 20px
    .preview
      .el-input
        width calc(100% - 40px)
      .iconfont
        color $c-main
        margin-left 16px
        font-size 20px
    .show
      margin-top 16px
      border 1px solid $c-border2
      overflow hidden
      iframe
        width calc(100% + 20px)
        height 460px
</style>